<template>
	<view class="content">
		<view class="menuBox">
			<view class="menuItem" :class="menuIndex==index?'menuActive':''" v-for="(item,index) in menuArr"
				:key="index" @click="changeMenu(index)">
				{{item}}
			</view>
		</view>
		<scroll-view scroll-y="true" class="scrollBox" v-if="dataArr.length>0" @scrolltolower="getMore()">
			<view class="info" v-for="(item,index) in dataArr" :key="index">
				<text class="statusHexiao" v-if="item.status==1">待核销</text>
				<text class="statusYiwancheng" v-else-if="item.status==2">已完成</text>
				<text class="statusYiguoqi" v-else-if="item.status==3">已过期</text>
				<text class="zhubanfang">主办方：{{item.communityActivity.sponsor}}</text>
				<image :src="item.communityActivity.cover" class="cover"></image>
				<view class="line">
				</view>
				<text class="name">{{item.communityActivity.name}}</text>
				<text class="time">预约时间:{{item.communityActivity.create_time}}</text>
				<text class="address">活动地点:{{item.communityActivity.address}}</text>
				<view class="hexiao" v-if="item.status==1"
					@click="$navto.navto('/packageB/my_activity_info/my_activity_info',{id:item.id,status:1})">
					立即核销
				</view>
				<view class="yiwancheng" v-else-if="item.status==2"
					@click="$navto.navto('/packageB/my_activity_info/my_activity_info',{id:item.id,status:2})">
					预约详情
				</view>
				<view class="yiguoqi" v-else-if="item.status==3"
					@click="$navto.navto('/packageB/my_activity_info/my_activity_info',{id:item.id,status:3})">
					预约详情
				</view>
			</view>
			<text class="tips">已经到底啦~</text>
		</scroll-view>
		<view class="noBox" v-else>
			<text class="noText">您暂未报名任何活动</text>
		</view>
		<back-btn></back-btn>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseurl: this.$baseurl,
				menuIndex: 0,
				menuArr: ['全部', '待核销', '已完成', '已过期'],
				isShow: true,
				dataArr: [],
				status: 0,
				page: 1
			}
		},
		onShow() {

		},
		onLoad() {
			//获取列表
			this.getData();
		},
		methods: {
			getMore() {
				this.page++;
				this.$request.get(`CommunityActivityApply/user_activity?status=${this.status}&page=${this.page}`).then(
					res => {
						this.dataArr.push(...res.data.data);
					})
			},
			//取消预约
			cancel(id) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '您确定取消此预约？',
					success: function(res) {
						if (res.confirm) {
							that.$request.get(`subscribeCancel/${id}`).then(res => {
								that.getData();
								that.$toast('取消成功');
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getData() {
				//获取列表
				this.$request.get(`CommunityActivityApply/user_activity?status=${this.status}&page=${this.page}`).then(
					res => {
						this.dataArr = res.data.data;
						console.log(this.dataArr.length)
					})
			},
			changeMenu(index) {
				this.page = 1;
				this.menuIndex = index;
				this.status = index;
				this.getData();
			}
		}
	}
</script>

<style scoped lang="scss">
	.noBox {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tips {
		display: block;
		font-weight: 400;
		width: 100%;
		font-size: 20rpx;
		color: #8E8E8E;
		margin-top: 90rpx;
		padding-bottom: 90rpx;
		text-align: center;
	}

	.noText {
		display: block;
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		color: #8E8E8E;
	}

	.noImg {
		width: 56rpx;
		height: 56rpx;
		margin-left: 347rpx;
		margin-top: 446rpx;
	}

	.scrollBox {
		width: 100%;
		height: 88vh;
		overflow-y: scroll;
		// background-color: red;
		margin-top: 25rpx;
	}

	.yiguoqi {
		position: absolute;
		width: 140rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 22rpx;
		color: #fff;
		right: 33rpx;
		bottom: 20rpx;
		border-radius: 30rpx;
		margin-top: 13rpx;
		background-color: #919191;
	}

	.yiwancheng {
		position: absolute;
		width: 140rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 22rpx;
		color: #fff;
		right: 33rpx;
		bottom: 20rpx;
		border-radius: 30rpx;
		margin-top: 13rpx;
		background-color: #4E97AD;
	}

	.hexiao {
		position: absolute;
		width: 140rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 22rpx;
		color: #fff;
		right: 33rpx;
		bottom: 20rpx;
		border-radius: 30rpx;
		margin-top: 13rpx;
		background-color: #D95945;
	}

	.info {
		position: relative;
		width: 700rpx;
		height: 330rpx;
		margin-left: 25rpx;
		margin-bottom: 25rpx;
		background-color: #fff;
		border-radius: 20rpx;

		.line {
			position: absolute;
			width: 100%;
			height: 1rpx;
			background-color: #919191;
			top: 80rpx;
		}

		.address {
			position: absolute;
			font-size: 25rpx;
			left: 300rpx;
			top: 205rpx;
			color: #919191;
			width: 395rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.time {
			position: absolute;
			font-size: 25rpx;
			left: 300rpx;
			top: 165rpx;
			color: #919191;
			width: 395rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.name {
			position: absolute;
			font-size: 28rpx;
			font-weight: 700rpx;
			left: 300rpx;
			top: 120rpx;
			width: 395rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.statusYiguoqi {
			position: absolute;
			font-size: 25rpx;
			right: 33rpx;
			top: 30rpx;
			color: #919191;
		}

		.statusYiwancheng {
			position: absolute;
			font-size: 25rpx;
			right: 33rpx;
			top: 30rpx;
		}

		.statusHexiao {
			position: absolute;
			font-size: 25rpx;
			right: 33rpx;
			top: 30rpx;
			color: #D95945;
		}

		.cover {
			position: absolute;
			width: 234rpx;
			height: 168rpx;
			border-radius: 15rpx;
			left: 33rpx;
			top: 120rpx;
		}

		.zhubanfang {
			position: absolute;
			font-size: 24rpx;
			left: 33rpx;
			top: 30rpx;
		}
	}

	.menuBox {
		width: 750rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		padding-left: 65rpx;
		padding-right: 65rpx;

		.menuItem {
			// width: 170rpx;
			font-size: 28rpx;
			text-align: center;
			padding-bottom: 15rpx;
			font-weight: 700;
		}

		.menuActive {
			color: #4E97AD;
			border-bottom: 4rpx solid #4E97AD;
		}

		.menuItem:nth-last-child(1) {
			border: none;
		}
	}

	.content {
		position: fixed;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background-color: #F9FAFA;
		background: url("https://miantou.guguan.net/img/common/bg.png");
		background-size: 100% auto;
	}

	page {
		width: 100%;
		height: 100vh;
		overflow-y: scroll;
		background-color: #F9FAFA;
	}
</style>